/*
 * @Author: actor
 * @Date: 2023-11-13 15:43:57
 * @email: 395593455@qq.com
 * @LastEditors: actor
 * @LastEditTime: 2023-12-19 10:11:36
 * @FilePath: \i-hos-app\shared\emr\src\hooks\useCreateHtml.ts
 * @Description: 插入组件动态生成html
 */
// 接口约束
import { IPageConfigStore } from '../interface/page'

// store数据
import { usePageConfigStore } from '../store/pageConfig'

export const useCreateHtml = (): any => {
  // 解构 store的配置数据
  const configStore: IPageConfigStore = usePageConfigStore()

  // 创建选中框HTML
  const createCheckedHtml = (id: string): void => {
    // 获取更换innerHTML的节点和配置
    if (!!configStore.val.option && !Array.isArray(configStore.val.option)) {
      let _curDom = document.getElementById(id) as HTMLElement
      let _option: string[] = JSON.parse(JSON.stringify(configStore.val.option)).split('\n')
      let _type: string = configStore.val.type == '复选框' ? 'checkBox' : configStore.val.type == '单选框' ? 'radio' : ''
      // 过滤掉无用的字符
      let _newOption: string[] = _option.filter((i: string): any => i && i.trim())
      // 创建的innerHTML
      let _HTMLString: string = `
        ${_newOption
          .map((item: string, index: number): any => {
            return `<div>
            <input type="${_type}" value="${item}" id="${id}_${_type}_${index}" name="${id}_${_type}_${index}">
            <label type="${_type}" for="${id}_${_type}_${index}">${item}</label>
          </div>`
          })
          .join('')}`
      _curDom.innerHTML = _HTMLString
    }
  }

  return {
    createCheckedHtml,
  }
}
